<template>
  <view class="warp_box">
    <view class="yihang">
      <input class="sousuo" type="text" placeholder="请输入货品编号/货品名称" />
      <button class="tianjia">添加货品</button>
      <img src="../../static/chuku/search-icon.png" alt="" />
    </view>
    <view class="erhang">
      <view class="x1">
        <text> 最新 </text>
        <img src="../../static/chuku/sort_down_red.png" alt="" />
      </view>
      <view class="x1">
        <text> 货号 </text>
        <img src="../../static/chuku/sort_default_gary.png" alt="" />
      </view>
      <view class="x1">
        <text> 库存量 </text>
        <img src="../../static/chuku/sort_default_gary.png" alt="" />
      </view>
      <view class="x4">
        <text> 全部分类 </text>
        <img src="../../static/chuku/down_triangle.png" alt="" />
      </view>
    </view>
    <view class="content">
      <view
        class="neironghang"
        v-for="item in goods"
        @click="tohuopin_fn(item)"
        :key="item.id"
      >
        <view class="left">
          <img :src="`http://localhost:3006/${item.img}`" alt="" />
        </view>
        <view class="right">
          <view class=""> 货品名称：{{ item.name }} </view>
          <view class=""> 货品编号：{{ item.id }} </view>
          <view class=""> 货品数量：{{ item.num }} </view>
          <view class=""> 货品价格：{{ item.price }} </view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="x1">
        <view> 出:{{ chuhuoshulaing }} </view>
        <view> 共计: {{ chuhuojiage }} </view>
      </view>
      <view v-show="canshu != ''" class="">
        <button @click="toyixuanze_fn">
          已选择: <text> {{ chuhuoshulaing }}</text>
        </button>
      </view>
      <view class="">
        <button @click="tochuangjainchukudan_fn">选好了</button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      goods: [],
      xxx: [],
      canshu: [],
      chuhuoshulaing: "",
      chuhuojiage: "",
    };
  },
  methods: {
    tohuopin_fn(item) {
      uni.navigateTo({
        url: "./huopin?id=" + item.id,
      });
      // print();
    },
    toyixuanze_fn() {
      uni.navigateTo({
        url: "./chuhuopin",
      });
    },
    tochuangjainchukudan_fn() {
      // uni.navigateTo({
      //   url: "./chuangjianchukedan",
      // });
      uni.navigateTo({
        url: "./chuangjianchukedan",
      });
    },
  },
  // onLoad: function (option) {
  //   console.log(option.key);
  //   this.xxx.push(option.key);
  //   console.log(this.xxx);
  // },
  created() {
    console.log(111);
    uni.request({
      url: "http://localhost:3006/qushuju", //仅为示例，并非真实接口地址。
      data: {
        text: "uni.request",
      },
      header: {
        "custom-header": "hello", //自定义请求头信息
      },
      success: (res) => {
        console.log("数据请求成功。。。。。。。");
        // console.log(res.data.data);
        this.goods = res.data.data;
        // console.log(this.goods);
      },
    });
    // 获取参数
    try {
      const value = uni.getStorageSync("storage_key");
      if (value) {
        console.log(value);
        this.canshu = value;
        var num11 = 0;
        var zongjia11 = 0;
        for (let i = 0; i < value.length; i++) {
          num11 = num11 + value[i].num;
          zongjia11 = zongjia11 + value[i].zongjia;
        }
        this.chuhuoshulaing = num11;
        this.chuhuojiage = zongjia11;
      }
    } catch (e) {
      // error
    }
  },
  mounted() {
    console.log(8888);
    // try {
    //   const value = uni.getStorageSync("storage_key");
    //   if (value) {
    //     console.log(value);
    //     this.canshu = value;
    //     console.log(this.canshu);
    //   }
    // } catch (e) {
    //   // error
    // }
  },
};
</script>
<style scoped lang="less">
.warp_box {
  padding: 0 30rpx;
  .yihang {
    display: flex;
    position: relative;
    .sousuo {
      width: 450rpx;
      height: 70rpx;
      background-color: #ddd;
      padding-left: 60rpx;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
    .tianjia {
      font-size: 30rpx;
      font-weight: 700;
      width: 170rpx;
      height: 70rpx;
      line-height: 70rpx;
      background-color: #fbcc04;
    }
    img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 18rpx;
      left: 15rpx;
    }
  }
  .erhang {
    height: 60rpx;
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
    border-bottom: 1rpx solid #ddd;
    .x1 {
      text {
        padding-right: 15rpx;
      }
      img {
        width: 20rpx;
        height: 36rpx;
        vertical-align: middle;
      }
    }
    .x4 {
      margin-left: 100rpx;
      text {
        padding-right: 15rpx;
      }
      img {
        width: 20rpx;
        height: 26rpx;
        vertical-align: middle;
      }
    }
  }
  .neironghang {
    display: flex;
    padding: 0 40rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #ddd;

    .left {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      img {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .right {
      margin-left: 20rpx;
      width: 300rpx;
      height: 170rpx;
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
